<%--
  Created by IntelliJ IDEA.
  User: 烟卷
  Date: 2022/10/30
  Time: 13:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
    <script src="js/ZdCascader.js"></script>
    <link rel="stylesheet" href="css/ZdCascader.css" type="text/css">
    <link rel="shortcut icon" type="image/x-icon" href="images/nangua.jpg" media="screen" />
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/prettify-1.0.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/lq.datetimepick.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/moment-with-locales.js"></script>
    <script src="js/bootstrap-datetimepicker.js"></script>


</head>
<body>
<a style="display:block;width:200px;height:42px;line-height:42px;font-size:18px;text-align:center;margin:40px auto;font-weight:800;" href="#" class="tbox">点击弹出</a>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <h4 class="modal-title" align="center">预约信息</h4>
                <br>
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="name" class="col-sm-offset-2 col-sm-2 control-label">预约车系</label>
                        <div class="col-sm-5">
                            <input type="text" style="height: 34px;font-size: 14px;color: darkgray"  id="reservecar" placeholder="请选择车系">
                        </div>
                        <script src="js/ZdCascader.js"></script>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-offset-2 col-sm-2 control-label">预约电话</label>
                        <div class="col-sm-5">
                            <input type="text" style="width: 200px" class="form-control" id="reservephone" placeholder="请输入预约电话">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-offset-2 col-sm-2 control-label">预约时间</label>
                        <div class="col-sm-5">
                            <div class='col-sm-6'>
                                <div class="form-group">
                                    <div class='input-group date' id='datetimepicker1' style="width: 200px">
                                        <input type='text' class="form-control" />
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                                    </div>
                                </div>
                            </div>


                            <script type="text/javascript">
                                /*$(function (){
                                    $('#datetimepicker1').datetimepicker({
                                        locale: 'zh-cn',
                                        format:"YYYY-MM-DD hh:mm:ss"
                                    });
                                });*/

                                $(function () {
                                    $('#datetimepicker1').datetimepicker({
                                        //use24hours: true,
                                        format:"YYYY-MM-DD HH:mm",
                                        // locale:'zh-cn'
                                    });

                                });
                            </script>
                        </div>



                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-5">
                            <button id="submitBtn" type="submit" class="btn btn-default btn-block btn-primary">确认</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
            </div>
        </div>
        <!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script type="text/javascript">
    $(function () {

        $(".tbox").click(function () {
            $('#myModal').modal('show')
        })



    });
</script>


<script>
    var _data = [{
        value: 'shanghai',
        label: '上海',
        children: [{
            value: 'shanghaishi',
            label: '上海市',
            children: [{
                value: 'baoshan1',
                label: '宝山区'
            }, {
                value: 'fengxian1',
                label: '奉贤区'
            }, {
                value: 'putuo1',
                label: '普陀区'
            }, {
                value: 'hongkou1',
                label: '虹口区'
            }]
        }]
    }, {
        value: 'hunan',
        label: '湖南省',
        children: [{
            value: 'shaoyang',
            label: '邵阳市',
            children: [{
                value: 'baoshan2',
                label: '宝山区'
            }, {
                value: 'fengxian2',
                label: '奉贤区'
            }, {
                value: 'putuo2',
                label: '普陀区'
            }, {
                value: 'hongkou2',
                label: '虹口区'
            }]
        }, {
            value: 'hengyang',
            label: '衡阳市',
            children: [{
                value: 'baoshan3',
                label: '宝山区'
            }, {
                value: 'putuo3',
                label: '普陀区'
            }, {
                value: 'hongkou3',
                label: '虹口区'
            }]
        }]
    }, {
        value: 'sichuan',
        label: '四川省',
        children: [{
            value: 'leshanshi',
            label: '乐山市',
            children: [{
                value: 'baoshan4',
                label: '宝山区'
            }, {
                value: 'fengxian4',
                label: '奉贤区'
            }, {
                value: 'putuo4',
                label: '普陀区'
            }, {
                value: 'hongkou4',
                label: '虹口区'
            }]
        }]
    }, {
        value: 'beijing',
        label: '北京'
    }];
    $(function(){
        $('#reservecar').zdCascader({
            data:_data
        });
    })
</script>





</body>
</html>